<template>
    <div class="myCollection">
        <!-- 导航栏 -->
        <Back :sticky="true" title="我的收藏" />
        <div>
            <Bg>
                <div class="collection-content">
                    <div class="collection-content-box">
                        <div
                            class="content-box"
                            v-for="(item, index) in collectionData"
                            :key="index"
                        >
                            <ProItem :information="item" class="proItem">
                                <template>
                                    <div
                                        class="del"
                                        @click="delFn(item.pid, index)"
                                    ></div>
                                </template>
                            </ProItem>
                        </div>
                    </div>
                    <van-empty
                        v-if="collectionData.length === 0"
                        description="没有收藏！"
                        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                    >
                        <van-button
                            round
                            type="danger"
                            class="bottom-button"
                            @click="goPage('Menu')"
                            >去逛一逛</van-button
                        >
                    </van-empty>
                </div>
            </Bg>
        </div>
    </div>
</template>

<script>
// 导入公共组件
import Back from "../components/Back.vue";
import Bg from "../components/Bg.vue";
import ProItem from '../components/ProItem.vue'
import { Dialog } from 'vant';

export default {
    name: "MyCollection",
    // 注册子组件
    components: {
        Back,
        Bg,
        ProItem
    },
    data() {
        return {
            collectionData: [],
        }
    },

    methods: {
        getFindAllLike() {
            this.axios({
                method: "GET",
                url: "/findAllLike",
            }).then((result) => {
                
                if (result.data.code === 2000) {
                    this.collectionData = result.data.result;
                }

            }).catch((err) => {
                
            });
        },

        delFn(pid, index) {
            

            Dialog.confirm({
                message: '确定取消该收藏吗？',
            }).then(() => {


                this.axios({
                    method: "POST",
                    url: '/notlike',
                    data: {
                        pid
                    }
                }).then((result) => {
                    
                    if (result.data.code === 900) {
                        this.collectionData.splice(index, 1);
                    }

                }).catch((err) => {
                    

                });

            }).catch(() => { });
        },
        //跳转页面
        goPage(name) {
            this.$router.push({ name });
        },

    },
    // 初始化钩子
    created() {
        this.getFindAllLike();
    },
}
</script>

<style lang="less" scoped>
.myCollection {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f7f7f7;
    overflow: scroll;

    .collection-content {
        // overflow: scroll;

        .collection-content-box {
            display: flex;
            padding: 10px;
            padding-bottom: 0;
            flex-wrap: wrap;
        }
    }

    .content-box {
        width: calc(~'33.333% - 9px + 3px');
        margin-right: 9px;
        margin-bottom: 12px;
        background-color: #fff;

        &:nth-child(3n) {
            margin-right: 0;
        }
    }
    .proItem {
        position: relative;
    }
    .del {
        width: 18px;
        height: 18px;
        background: url('../assets/删除.png') center center no-repeat;
        background-size: contain;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    /deep/ .van-empty {
        .bottom-button {
            width: 160px;
            height: 40px;
        }
    }
}
</style>